<template>
    <div class="homeBox">
        <div class="login-container">
            <el-form :model="ruleForm2" :rules="rules2"
                     status-icon
                     ref="ruleForm2"
                     label-position="left"
                     label-width="0px"
                     class="demo-ruleForm login-page">
                <h3 class="title">阴阳师登陆</h3>
                <el-form-item prop="username">
                    <el-input type="text"
                              v-model="ruleForm2.username"
                              auto-complete="off"
                              placeholder="用户名"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password"
                              v-model="ruleForm2.password"
                              auto-complete="off"
                              placeholder="密码"
                    ></el-input>
                </el-form-item>
                <el-checkbox
                        v-model="checked"
                        class="rememberme"
                >记住密码
                </el-checkbox>
                <el-form-item style="width:100%;">
                    <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                logining: false,
                ruleForm2: {
                    username: 'admin',
                    password: '123456',
                },
                rules2: {
                    username: [{required: true, message: 'please enter your account', trigger: 'blur'}],
                    password: [{required: true, message: 'enter your password', trigger: 'blur'}]
                },
                checked: false
            }
        },
        methods: {
            handleSubmit(event) {
                console.log(event);
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        this.logining = true;
                        if (this.ruleForm2.username === 'admin' &&
                            this.ruleForm2.password === '123456') {
                            this.logining = false;
                            sessionStorage.setItem('user', this.ruleForm2.username);
                            this.$router.push({path: '/home'});
                        } else {
                            this.logining = false;
                            this.$message({
                                type: 'error',
                                message: '用户名或密码错误',
                                showClose: true
                            })
                        }

                    } else {
                        console.log('error submit!');
                        return false;
                    }
                })
            }
        },

    };
</script>

<style scoped>

    .login-container {
        width: 100%;
        height: 100%;

    }

    .login-page {

        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px;
        background-color: rgba(255,255,255,0.6);
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    label.el-checkbox.rememberme {
        margin: 0px 0px 15px;
        text-align: left;
    }

    .homeBox {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: url("~@/assets/back.jpg") center center no-repeat;
    }
</style>
